<template>
    <div ref="tableRef" style="width: 100%; height: 100%;">
      <a-table :columns="columns" :dataSource="tableData" :pagination="false" bordered size="small" style="width: 100%; height: 100%; table-layout: fixed">
      </a-table>
    </div>
  </template>
  
  <script setup lang="ts">
  import dayjs from 'dayjs';
  import { ref, watch, onMounted, onBeforeUnmount } from 'vue';

  const today = dayjs().format('MM月DD日');
  const yesterday = dayjs().subtract(1, 'days').format('MM月DD日');

  const props = defineProps({
    data: {
        type: Object as PropType<object>,
    },
  })

  let tableData = ref<any[]>([]);
const resizeObserver = ref<ResizeObserver | null>(null);
const tableRef = ref<HTMLElement | null>(null);

const handleResize = () => {
  if (tableRef.value) {
    const containerWidth = tableRef.value.offsetWidth;
    const containerHeight = tableRef.value.offsetHeight;
    // 这里可以添加表格尺寸调整逻辑
  }
};

onMounted(() => {
  if (tableRef.value) {
    resizeObserver.value = new ResizeObserver(handleResize);
    resizeObserver.value.observe(tableRef.value);
  }
});

onBeforeUnmount(() => {
  if (resizeObserver.value) {
    resizeObserver.value.disconnect();
  }
});

  watch(
    () => props.data,
    (val) => {
      // console.log('data:', val);
      if (val && Array.isArray(val)) {
        // console.log('数据格式正确，更新tableData');
        tableData.value = val;
      } else {
        console.error('data:', typeof val);
      }
    },
    {deep: true, immediate: true}
  )


  const columns = [
    {
      title: '指标',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: yesterday,
      key: `date_${yesterday}`,
      children: [
        {
          title: '平均值',
          dataIndex: 'average',
          key: `avg_${yesterday}`,
        },
        {
          title: '最高值',
          dataIndex: 'max',
          key: `max_${yesterday}`,
        },
        {
          title: '最低值',
          dataIndex: 'min',
          key: `min_${yesterday}`,
        },
      ],
    },
    {
      title: today,
      key: `date_${today}`,
      children: [
        {
          title: '最新数据',
          dataIndex: 'now',
          key: `latest_${today}`,
        },
      ],
    },
  ];

  </script>
  
  <style scoped>
  ::v-deep(.ant-table) {
    background-color: #0a1448; /* 表格整体背景色 */
    width: 100%;
  }
  
  ::v-deep(.ant-table-cell) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  ::v-deep(.ant-table-thead > tr > th) {
    text-align: center;
    background-color: #0a1448 !important; /* 表头背景色 */
    font-size: 12px;
    height: 20px;
    padding: 0px !important;
    line-height: 1.2;
  }

  ::v-deep(.ant-table-tbody > tr) {
    background-color: #0a1448; /* 表格行背景色 */
    color: #fff; /* 表格行文本颜色 */
    text-align: center;
  }
  ::v-deep(.ant-table-tbody > tr > td) {
    padding: 0px!important;
    background-color: #0a1448; /* 表格行背景色 */
    color: #fff; /* 表格行文本颜色 */
  }

  ::v-deep(.ant-table-tbody > tr:hover) {
    background-color: #0a1448; /* 悬停时的背景色 */
  }

  </style>